<template>
  <Form
    ref="formDialog"
    :model="options.model"
    :rules="options.rules"
    :label-width="options.labelWidth"
  >
    <FormItem
      :prop="item.prop"
      :label="item.label"
      v-for="(item,index) in options.items"
      :key="index"
    >
      <Input
        v-if="item.type==='input'"
        type="text"
        :maxlength="20"
        :autofocus="true"
        v-model.trim="options.model[item.prop]"
        :placeholder="item.placeholder"
      />

      <Select
        v-if="item.type==='select'"
        v-model="options.model[item.prop]"
        :placeholder="item.placeholder"
      >
        <Option
          v-for="unit in item.selectList"
          :value="unit.value"
          :key="unit.value"
        >{{ unit.label }}</Option>
      </Select>

      <Cascader
        v-if="item.type==='cascader'"
        v-model="options.model[item.prop]"
        :data="item.selectList"
        change-on-select
      ></Cascader>
    </FormItem>
    <div class="form-footer">
      <div class="form-tips">{{tips}}</div>
      <Button @click="cancelHandler" style="margin-right: 10px;">取消</Button>
      <Button type="primary" @click="okHandler">确定</Button>
    </div>
  </Form>
</template>

<script>
export default {
  props: ['options', 'tips'],
  data () {
    return {};
  },

  methods: {
    // 确定
    okHandler () {
      this.$refs.formDialog.validate(valid => {
        if (valid) {
          this.$emit('okHandler', this.options.model);
        }
      });
    },

    // 取消
    cancelHandler () {
      this.$refs.formDialog.resetFields();
      this.$emit('cancelHandler');
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.form-footer {
  .form-tips {
    text-align: left;
    padding-left: 20px;
    line-height: 20px;
    font-weight: bold;
  }
  border-top: 1px solid #e8eaec;
  padding: 10px 15px 0;
  text-align: right;
  margin-top: 20px;
  width: calc(100% + 32px);
  margin-left: -16px;
}
</style>
